<template>
  <view class="container">
    <view class="queueBox">
      <view class="queueBox_top">

        <view class="shade shade1"></view>
        <view class="shade shade2"></view>

        <view class="queueBox_top_text">
          <h1>{{noneQueue? '0' : queueList.num}}</h1>
          <text>{{moment}}</text>
        </view>

        <view class="spot"></view>

        <view class="queueBox_bottom_text">
          <view class="queueBox_bottom_text_top">
            <text>正在排队人数<text class="red">{{noneQueue? '0' : queueList.currentCount}}</text></text>
            <view class="refresh" @click="reset()">
              <icon class="iconfont iconhuanyipi"></icon>刷新
            </view>
          </view>
        </view>
      </view>
      <view class="compileBox">
        <view class="compileBox_left" @click="navTo('/subpkg/queue_establish/queue_establish')">
          <icon class="iconfont iconbianji"></icon>
          <text>编辑信息</text>
        </view>
        <view class="compileBox_right" @click="navTo('/subpkg/QuickMark/QuickMark?image=' + Qrcode.qrCodeImg) ">
          <icon class="iconfont iconerweima"></icon>
          <text>我的二维码</text>
        </view>
      </view>
      <view class="compileBox_bottom">
        <view class="button_left" @click="addCallNumber()">
          叫号
        </view>
        <view class="button_right" @click="next()">
          下一位
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  
  import {
    mapGetters
  } from 'vuex'

  import {
    getSalesclerk,
    CallNumber,
    nextEstablish,
    refreshEstablish
  } from '@/api/queue.js'

  export default {
    data() {
      return {
        queueList: [],

        // 二维码
        Qrcode: [],
        // 用户排队id
        queuingUserId: '',
        // 以前的id
        previousId: '',
        // 门店id
        shopId: '',
        // 没有人数
        noneQueue: false,
        // 暂时无人排队
        moment: ''
      };
    },
    computed: {
      ...mapGetters('m_user', ['currentStoreId'])
    },
    onReachBottom() {
      
    },
    onLoad() {
      getSalesclerk(this.currentStoreId).then(res => {
        if (res.data.shopQueuingUser) {
          this.queueList = res.data.shopQueuingUser
          this.moment = "最新排队号码"
        } else {
          this.moment = "暂时无人排队"
        }
        this.Qrcode = res.data.shopQueuing
        // console.log(this.Qrcode)
        // console.log(this.currentStoreId)
        uni.setStorageSync('Qrcode', this.Qrcode);
      }).catch(res => {
        this.moment = "请先创建门店排队信息";
        this.$util.Tips({
          title: '请先创建门店排队信息~',
        })
      })
      // setInterval(function() {
      //   var that = this
      //   getSalesclerk(that.currentId > 1 ? that.currentId : that.currentStoreId).then(res => {
      //     that.queueList = res.data
      //     if (that.queueList.status == 2) {
      //       that.entranceShow = true
      //     }
      //   }).catch(res => {
      //     that.$util.Tips({
      //       title: '刷新失败~',
      //     })
      //   })
      // }, 10000);
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      // 叫号
      addCallNumber() {
        this.queuingUserId = this.queueList.id
        CallNumber(this.queuingUserId).then(res => {
          if (res.code == 200) {
            this.$util.Tips({
              title: '操作成功~',
            })
          }
        })

      },
      // 下一个
      next() {
        nextEstablish(this.queueList.id, this.currentStoreId).then(res => {
          if (res.data) {
            return this.queueList = res.data
          }
          this.$util.Tips({
            title: '当前没有排队人数~',
          })
          this.noneQueue = true
        })
      },
      // 刷新
      reset() {
        getSalesclerk(this.currentStoreId).then(res => {
          if (res.data.shopQueuingUser) {
            this.queueList = res.data.shopQueuingUser
            this.moment = "最新排队号码"
          } else {
            this.moment = "暂时无人排队"
          }
          this.Qrcode = res.data.shopQueuing
          uni.setStorageSync('Qrcode', this.Qrcode);
          this.$util.Tips({
            title: '刷新成功~',
          })
        }).catch(res => {
          this.moment = "请先创建门店排队信息";
          this.$util.Tips({
            title: '请先创建门店排队信息~',
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .queueBox {
    padding: 40rpx 24rpx;
    background-color: rgba(255, 255, 255, 1);
  }

  .queueBox_top {
    position: relative;
    width: 702rpx;
    height: 588rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
    z-index: 1;

    .queueBox_top_text {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 80rpx;

      h1 {
        font-size: 100rpx;
        font-weight: 600;
      }

      text {
        font-size: 30rpx;
        color: rgba(61, 61, 61, .5);
      }
    }

    .queueBox_bottom_text {
      width: 550rpx;
      position: absolute;
      bottom: 50rpx;
      left: 50%;
      transform: translate(-50%);

      .queueBox_bottom_text_top {
        margin-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        text {
          font-size: 30rpx;
          color: rgba(61, 61, 61, .5);
        }

        .red {
          padding: 0 15rpx;
          font-size: 60rpx;
          color: rgba(255, 87, 51, 1);
        }

        .refresh {
          position: relative;
          color: rgba(61, 61, 61, 1);

          image {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            top: 6rpx;
            left: -50rpx;
          }
        }
      }
    }

    .spot {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 1rpx;
      border-bottom: 1rpx dashed rgba(224, 224, 224, 1);
    }

    .shade {
      width: 100rpx;
      height: 100rpx;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 50%;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.02) inset;
      z-index: 1;
    }

    .shade1 {
      position: absolute;
      top: 60%;
      left: -46rpx;
      transform: translateY(-50%);
    }

    .shade2 {
      position: absolute;
      top: 60%;
      left: 650rpx;
      transform: translateY(-50%);
    }
  }

  .compileBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%);
    box-sizing: border-box;
    width: 653rpx;
    height: 174rpx;
    padding: 28rpx 44rpx;
    border-radius: 20rpx;

    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);

    .compileBox_left {
      .iconbianji {
        font-size: 26rpx;
        margin-right: 5rpx;
      }

      text {
        font-size: 28rpx;
        color: rgba(61, 61, 61, .5);
      }
    }

    .compileBox_right {
      .iconerweima {
        font-size: 26rpx;
        margin-right: 5rpx;
      }

      text {
        font-size: 28rpx;
        color: rgba(61, 61, 61, .5);
      }
    }
  }

  .compileBox_bottom {
    display: flex;
    justify-content: space-around;
    position: absolute;
    left: 50%;
    bottom: 60rpx;
    transform: translate(-50%);

    view {
      width: 322rpx;
      height: 96rpx;
      border-radius: 43rpx;
      color: rgba(61, 61, 61, 1);
      font-size: 36rpx;
      text-align: center;
      line-height: 96rpx;
    }

    .button_left {
      border: 1rpx solid rgba(240, 240, 240, 1);
      margin-right: 58rpx;
    }

    .button_right {
      background-color: rgba(253, 211, 56, 1);
    }
  }
</style>
